<template>
  <div class="tw-libchart">
    <div v-show="data.length>0"
      class="tw-datasetchart"
      ref="chart"
      :style="{height: height, backgroundColor: bgColor}">
    </div>

    <tw-lib-nodata v-show="data.length===0" />
  </div>
</template>

<script>
import props from './props'
import chartMixins from '../tw-lib-base/chart/chart'

export default {
  name: 'chart-customized-radar-menu',

  mixins: [chartMixins],

  props,

  data() {
    return {
      chartType: 'radar',
      curname: '学业水平'
    }
  },

  computed: {
    option () {
      let vm = this
      vm.indicator.forEach((item, index) => {
        if (['品德行为', '学业水平', '身心健康', '兴趣特长', '学业负担'].indexOf(item.name) > -1) {
          item.color = vm.colors[0]
        }
        if (['师德修养', '专业能力', '教学效能'].indexOf(item.name) > -1) {
          item.color = vm.colors[1]
        }
        if (['常规管理', '办学特色', '办学行为'].indexOf(item.name) > -1) {
          item.color = vm.colors[2]
        }
      })


      return {
        color: this.colors,
        radar: {
          indicator: this.indicator,
          shape: this.shape === 'circle' ? 'circle' : 'polygon',
          radius: this.radiusLength,
          startAngle: this.startAngle,
          name: {
            show: this.showName,
            formatter: function (name) {
              let str = name
              if (name === vm.curname) {
                str = '{a|' + name + '}'
              }
              return str
            },
            textStyle: {
              color: this.radarNameColor,
              fontSize: this.radarNameSize,
              backgroundColor: this.radarNameBgColor,
              borderRadius: 3,
              padding: [3, 5],
              rich: {
                a: {
                  fontSize: 24
                }
              }
            }
          },
          axisLine: {
            lineStyle: {
              color: this.radarLineColor
            }
          },
          splitLine: {
            lineStyle: {
              color: this.radarLineColor
            }
          },
          center: [this.radarX, this.radarY],
          triggerEvent: true,
        },

        series: [
          {
            type: 'sunburst',
            center: ['50%', '50%'],
            nodeClick: false,
            levels: [{},
              {
                r0: '85%',
                r: '95%',
              }
            ],
            label: {
              color: this.sunburstColor,
              fontSize: this.sunburstSize
            },
            data: this.data
        },
        {
          type: 'radar',
          silent: false,
          zlevel: 2,
          tooltip: {
            show: true
          },
          lineStyle: {
            width: 1,
            opacity: 1
          },
          areaStyle: {
            normal: {}
          },
          data: [{
              value: [80, 0, 0, 0, 0, 0, 80, 80, 80, 80, 80],
            },
            {
              value: [0, 0, 0, 80, 80, 80, 80, 0, 0, 0, 0],
            },
            {
              value: [80, 80, 80, 80, 0, 0, 0, 0, 0, 0, 0],
            }]
          },]
      }
    }
  },

  methods: {
    setSeries () {
      // console.log(this.option)
    },
    setOption () {
      if (this.data.length > 0) {
        this.chart.setOption(this.option, true)
        if (this.useLiandong) {
          this.chart.off('click')
          this.chart.on('click', this.handleclick)
        }
        this.resize()
      }
    },
    handleclick (params) {
      console.log(params)
      if (params.componentType === 'radar') {
        this.curname = params.name
        this.$emit('input', params.name)
        this.$emit('change', params.name)
        this.chart.setOption({radar: {}})
      }
    },
  },

  watch: {
    seriesIsRow () {
      this.setSeries()
    },

    isSmooth () {
      this.setSeries()
    },

    areaStyle () {
      this.setSeries()
    }
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
